<template>
  <!--  头部查询区-->
  <div style="padding: 10px">
    <div>
      <el-input v-model="titleKey" type="text" placeholder="按照标题查询" style="width: 180px;margin-right: 10px" clearable>
        <template #prefix>
          <el-icon class="el-input__icon">
            <ChatLineSquare/>
          </el-icon>
        </template>
      </el-input>
      <el-input v-model="details" type="text" placeholder="按照内容备注" style="width: 180px;margin-right: 10px" clearable>
        <template #prefix>
          <el-icon class="el-input__icon">
            <tickets/>
          </el-icon>
        </template>
      </el-input>
      <el-button type="primary" plain style="width: 100px" @click="findAllByPage">查询</el-button>
      <el-button type="success" plain @click="Add">新增流水</el-button>
      <el-button type="warning" plain @click="exportPic('imgEchartsAndTable')">导出图片</el-button>
      <el-button type="info" plain @click="exportExcel">导出Excel</el-button>
    </div>
    <!--数据表格区-->
    <el-table
        id="imgEchartsAndTable"
        :data="tableData"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%;margin: 10px 0;"
        size="small"
        border
        stripe>
      <el-table-column prop="id" label="编号" width="50" :resizable="false"/>
      <el-table-column prop="name" label="姓名" width="130" :resizable="false"/>
      <el-table-column prop="price" label="金额(元)" width="100" sortable :resizable="false"/>
      <el-table-column prop="title" label="标题" :resizable="false"/>
      <el-table-column prop="details" label="详情" show-overflow-tooltip :resizable="false"/>
      <el-table-column prop="payway" label="消费渠道" width="80" :resizable="false"/>
      <el-table-column prop="createTime" label="消费时间" sortable width="120" :resizable="false"/>
      <el-table-column label="操作" :resizable="false">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-popconfirm title="是否要删除该条数据" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页区域-->
    <div style="margin:10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5,10,20]"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total"></el-pagination>
    </div>
    <!--新增弹窗-->
    <div>
      <el-dialog width="380px" title='添加流水' v-model="AdddialogVisible" :close-on-click-modal="false" center>
        <el-form label-width="80px" :model="From">
          <el-form-item label="金额">
            <el-input v-model="From.price"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="From.title"></el-input>
          </el-form-item>
          <el-form-item label="详情">
            <el-input type="textarea" v-model="From.details"></el-input>
          </el-form-item>
          <el-form-item label="消费渠道">
            <el-select v-model="From.channelId" placeholder="请选择渠道">
              <el-option value="1" label="支付宝">支付宝</el-option>
              <el-option value="2" label="微信">微信</el-option>
              <el-option value="3" label="众联">众联</el-option>
              <el-option value="4" label="现金">现金</el-option>
              <el-option value="5" label="其他">其他</el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="AdddialogVisible = false">取消</el-button>
          <el-button @click="onSave">添加</el-button>
        </span>
        </template>
      </el-dialog>
    </div>
    <!--修改弹窗-->
    <div>
      <el-dialog width="380px" title='修改流水' v-model="EditdialogVisible" :close-on-click-modal="false" center>
        <el-form label-width="80px" :model="From">
          <el-form-item label="编号">
            <el-input v-model="From.id" placeholder="编号无法修改" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="From.name" placeholder="修改姓名" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="金额">
            <el-input v-model="From.price" placeholder="修改金额"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="From.title" placeholder="修改标题"></el-input>
          </el-form-item>
          <el-form-item label="详情">
            <el-input v-model="From.details" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="消费渠道">
            <el-select v-model="From.payway" placeholder="请选择渠道">
              <el-option value="支付宝" label="支付宝">支付宝</el-option>
              <el-option value="微信" label="微信">微信</el-option>
              <el-option value="众联" label="众联">众联</el-option>
              <el-option value="现金" label="现金">现金</el-option>
              <el-option value="其他" label="其他">其他</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流水日期">
            <el-date-picker
                v-model="From.createTime"
                type="datetime"
                placeholder="选择日期"
                value-format="YYYY-MM-DD HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="EditdialogVisible = false">取消</el-button>
          <el-button @click="onEdit">修改</el-button>
        </span>
        </template>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import request from "../../utils/request";
import ChatLineSquare from "@element-plus/icons/lib/ChatLineSquare";
import Tickets from "@element-plus/icons/lib/Tickets";
import Cookie from "cookie_js";
// 引入html2canvas
import html2canvas from 'html2canvas'
import Export from "../../api/Export";
export default {
  name: "RevenueDetails",
  components: {
    Tickets,
    ChatLineSquare
  },
  data() {
    return {
      //表单
      From: {},
      //表格数据
      tableData: [],
      pageNum: 1,
      //一页显示的条数
      pageSize: 10,
      //总条数
      total: 0,
      //搜索关键词
      details: '',
      //title 搜素
      titleKey: '',
      //添加弹窗
      AdddialogVisible: false,
      //修改弹窗
      EditdialogVisible:false,
    }
  },
  created() {
    //页面加载及刷新表格数据
    this.findAllByPage()
  },
  methods: {
    //分页查询
    findAllByPage() {
      request.get("/bill/findAllByPage", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          details: this.details,
          titleKey: this.titleKey
        }
      }).then(res => {
        //给表格赋值
        this.tableData = res.data.records;
        //赋值总条数
        this.total = res.data.total;
      })
    },
    //改变当前每页的个数触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.findAllByPage()
    },
    //改变当前页码触发
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.findAllByPage()
    },
    //打开新增弹窗
    Add() {
      this.AdddialogVisible = true
    },
    //添加流水
    onSave() {
      this.From.userName = Cookie.get("name").replace(/\"/g, "");//将当前用户姓名存入表单
      request.post("/bill/addWater", this.From).then(res => {
        if (res.code == "0") {
          this.$message({
            type: "success",
            message: res.msg
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.From = {}//清空表单
        this.AdddialogVisible = false//关闭弹窗
        this.findAllByPage()//刷新表格
      })
    },
    /*根据id删除流水*/
    handleDelete(id) {
      request.get("/bill/delWater/" + id).then(res => {
        if (res.code === "0") {
          this.$message({
            type: "success",
            message: res.msg
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.findAllByPage()//刷新表格数据
      })
    },
    /*打开弹窗并查寻该数据打印在表单*/
    handleEdit(id) {
      this.EditdialogVisible = true
      request.get("/bill/CheckOneById/" + id).then(res => {
        this.From = res.data
      })
    },
    /*修改流水记录*/
    onEdit(){
      request.post("/bill/editWater",this.From).then( res => {
        if(res.code ==="0"){
          this.$message({
            type: "success",
            message: res.msg
          })
        }else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.findAllByPage();
        this.EditdialogVisible = false;
      })
    },
    // 导出图片
    exportPic(DivID){
      html2canvas(document.querySelector("#"+DivID)).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        if (dataURL !== "") {
          var a = document.createElement('a')
          a.download = "收入详情";
          a.href = dataURL;
          a.click()
        }
      })
    },
    //导出Excel
    exportExcel(){
      Export.IncomeExport().then(res=>{
        const link = document.createElement('a') // 创建a标签
        link.href = "/api/bill/incomeExport"
        link.click()
        URL.revokeObjectURL(link)
      })
    }
  }
}
</script>
